<template>
  <div class="his chart">
    <div class="head">
      <p class="line-title">
        <i
          class="iconfont"
          style="color: #1890FF; background-color: rgb(230, 247, 255)"
          >&#xe7d8;</i
        >
        <span>{{ $t("console.histogram.title") }}</span>
      </p>
      <el-radio-group
        size="small"
        class="select_date"
        v-model="vdate"
        @change="HistogramData($event)"
      >
        <el-radio-button label="近7天"></el-radio-button>
        <el-radio-button label="近30天"></el-radio-button>
        <el-radio-button label="本年"></el-radio-button>
      </el-radio-group>
    </div>

    <div class="histogram">
      <ve-histogram :data="chartData" :extend="chartExtend" />
    </div>
    <!-- 没有数据 -->
    <div slot="empty" class="empty">
      <div v-if="showEmptyTips">
        <i class="iconfont">&#xe707;</i>
        <p>{{ emptyText }}</p>
      </div>
    </div>
  </div>
</template>

<script>
import { HistogramApi } from "@/api/ConsoleApi";

export default {
  name: "Histogram",
  data() {
    this.chartExtend = {
      legend: {
        show: false
      },
      color: [
        new echarts.graphic.LinearGradient(0, 1, 0, 0, [
          { offset: 0, color: "rgba(45, 140, 240, 0.8)" },
          { offset: 1, color: "rgba(66, 197, 246, 0.7)" }
        ])
      ],
      series: {
        barMaxWidth: 35,
        barCategoryGap: "50%",
        itemStyle: {
          barBorderRadius: [2, 2, 0, 0]
        }
      },
      xAxis: {
        show: true,
        position: "bottom",
        offset: 8,
        type: "category",
        axisLabel: {
          show: true,
          textStyle: {
            color: "#666"
          }
        }
      },
      yAxis: {
        show: true,
        position: "left",
        offset: 0,
        type: "value",
        splitLine: {
          show: false,
          lineStyle: {
            color: "#666",
            width: 1,
            type: "dashed"
          }
        }
      }
    };
    return {
      chartData: {
        columns: ["日期", "访问量"],
        rows: []
      },
      vdate: "近7天",
      showEmptyTips: false,
      emptyText: "暂无数据"
    };
  },
  mounted() {
    this.HistogramData("近7天");
  },
  methods: {
    HistogramData(val) {
      let userdata = JSON.stringify(this.$store.state.user.user.info);
      userdata = JSON.parse(userdata);
      let guestcode = userdata.reguserno;
      let gscode = userdata.gscode;
      let username = userdata.userName;
      let userid = userdata.id;
      let logintype = userdata.logintype;
      let posttype = userdata.posttype;
      HistogramApi({
        guestcode: guestcode,
        gscode: gscode,
        daytype: val,
        menuename: "HomePage",
        menucname: "数据总览",
        username: username,
        userid: userid,
        logintype: logintype,
        posttype: posttype,
        op_type: "查询"
      }).then(res => {
        if (res.code == "0") {
          this.chartData.rows = res.data.totaldata;
        } else {
          this.chartData.rows = [];
          this.setEmptyTips();
        }
      });
    },
    setEmptyTips() {
      setTimeout(() => {
        this.showEmptyTips = true;
      }, 300);
    }
  }
};
</script>

<style lang="scss" scoped>
.his {
  width: 55%;
  margin-right: 20px;
  position: relative;

  .histogram {
    width: calc(100% - 30px);
    position: absolute;
    bottom: -40px;
    left: 0;
    right: 0;
    margin: auto;
  }
}
.empty {
  margin: 0 auto;
  text-align: center;
  top: 50%;
  position: absolute;
  left: 50%;
  margin-left: -52px;
  i {
    color: #d7d6d6;
    font-size: 40px;
    display: block;
  }

  p {
    color: #999999;
    font-size: 13px;
    line-height: 30px;
    margin-top: -5px;
  }
}
.select_date {
  padding-right: 5px;
}

@media only screen and (max-width: $device-ipad) {
  .his {
    width: 100%;
    margin-right: 0px !important;

    .histogram {
      width: 100%;
    }
  }
}
</style>
